<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/class.css">
		<link rel="stylesheet" href="css/common.css">
	</head>

	<body>
		<div class="container">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">垃圾分类</h1>
			</header>
			<section>
				<div class="mui-slider">
				  <div class="mui-slider-group" id="muiSliderGroup">
						
				  </div>
				</div>
				
				<div class="scrollList">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<!--这里放置真实显示的DOM内容-->
							<ul id="classList">
								
							</ul>
						</div>
					</div>
				</div>
				
			</section>
		</div>
		
		
	</body>
	<script src="js/mui.js"></script>
	<script src="js/flexible.js"></script>
	<script type="text/javascript">
		mui.init()
		
		/* 请求数据 */
		mui.ajax('http://apis.juhe.cn/rubbish/category',{
			data:{
				key:'dfe7a5dc90a9be32d35d15d5a06eb619',
			},
			success:function(data){
				var result = data.result;
				mui.each(result,function(index,item){
					mui("#muiSliderGroup")[0].innerHTML += `
					<div class="mui-slider-item">
						<div>
							<h3>${item.name}</h3>
							<p>${item.explain}</p>
						</div>
					</div>`;
				});
				getList(result[0]);
				mui('.mui-slider').slider().gotoItem(0);
				mui('.mui-slider')[0].addEventListener('slide',function(){
					getList(result[event.detail.slideNumber]);
				})
			},
		})
		/* 加载对应的分类数据 */
		function getList(options){
			var sHtml = '';
			var nArr = options.common.split('、');
			mui.each(nArr,function(index,item){
				sHtml += `<li data-title="${item}">${item}</li>`;
			})
			mui("#classList")[0].innerHTML = sHtml;
		}
		
		/* 点击ul下的li绑定事件 */
		mui("#classList").on("tap","li",function(){
			var dataTitle = this.getAttribute("data-title");
			mui.openWindow({
				url:'detail.html',
				id:'detail',
				extras:{
					title:encodeURI(dataTitle)
				},
				show:{
					autoShow:true
				},
				waiting:{
					autoShow:true,
					title:'正在加载中...'
				}
			})
		})
		
		mui.plusReady(function () {
		    mui('.mui-scroll-wrapper').scroll({
					deceleration:0.005
				});
		})
	</script>
</html>
